package com.kidfit.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.axis.XAxis;
import com.extjs.gxt.charts.client.model.axis.YAxis;
import com.extjs.gxt.charts.client.model.charts.FilledBarChart;
import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Header;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class KidFit2 extends LayoutContainer implements EntryPoint {
	/**
	 * The message displayed to the user when the server cannot be reached or
	 * returns an error.
	 */
//	private static final String SERVER_ERROR = "An error occurred while "
//			+ "attempting to contact the server. Please check your network "
//			+ "connection and try again.";

	/**
	 * Create a remote service proxy to talk to the server-side Greeting service.
	 */
//	private final GreetingServiceAsync greetingService = GWT
//			.create(GreetingService.class);

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		RootPanel.get().add(this);
	}
	
	@Override
	protected void onRender(Element parent, int pos) {
//		super.setSize(300, 300);
		super.onRender(parent, pos);
		parent.getStyle().setProperty("background", "#ffcc66");
		setLayout(new FlowLayout(10));
		setScrollMode(Scroll.AUTO);
		
		LayoutContainer main = new LayoutContainer();
		main.setStyleAttribute("padding", "10px");
		main.setLayout(new ColumnLayout());
		
		final LayoutContainer pageOne = new LayoutContainer();
		pageOne.setStyleAttribute("padding", "10ox");
		pageOne.setLayout(new ColumnLayout());
		
		final LayoutContainer columnOne = new LayoutContainer();
		columnOne.setStyleAttribute("margin", "10px");
		final LayoutContainer columnTwo = new LayoutContainer();
		columnTwo.setStyleAttribute("margin", "10px");
		
		FormLayout columnOneLayout = new FormLayout();
		columnOneLayout.setDefaultWidth(230);
		columnOneLayout.setLabelWidth(50);
		columnOne.setLayout(columnOneLayout);
		
		FormLayout columnTwoLayout = new FormLayout();
		columnTwoLayout.setDefaultWidth(1000);
		columnTwoLayout.setLabelWidth(450);
		columnTwo.setLayout(columnTwoLayout);
		
		pageOne.add(columnOne, new ColumnData(230));
		pageOne.add(columnTwo, new ColumnData(1000));
		
		main.add(pageOne);
		add(main);
		
		GridCellRenderer<Child> name = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				String val = (String) model.get(property);
			    String style = "Adrian".equals(val) ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
			
		GridCellRenderer<Child> rank = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				int val = (Integer) model.get(property);
			    String style = 3 == (val) ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
		
			
		GridCellRenderer<Child> points = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				int val = (Integer) model.get(property);
			    String style = 15000 == val ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
			
		GridCellRenderer<Child> today = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				int val = (Integer) model.get(property);
			    String style = 110 == val ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
			
		GridCellRenderer<Child> level = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				String val = (String) model.get(property);
			    String style = "Athlete ".equals(val) ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
			
		GridCellRenderer<Child> time = new GridCellRenderer<Child>() {  
			public Object render(Child model, String property, 
					com.extjs.gxt.ui.client.widget.grid.ColumnData config, int rowIndex, 
					int colIndex, ListStore<Child> store, Grid<Child> grid) {  
				String val = (String) model.get(property);
			    String style = "3:50".equals(val) ? "red; font-weight:bold;" : "black";
			    return "<span style='color:" + style + "'>" + val + "</span>";
			    }
			};
				
		List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
		
		ColumnConfig column = new ColumnConfig();
		column.setId("rank");
		column.setHeader("Rank");
		column.setWidth(150);
		column.setRenderer(rank);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		
		column = new ColumnConfig();
		column.setId("name");
		column.setHeader("Name");
		column.setWidth(150);
		column.setRenderer(name);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		column = new ColumnConfig();
		column.setId("points");
		column.setHeader("Total Points");
		column.setWidth(150);
		column.setRenderer(points);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		column = new ColumnConfig();
		column.setId("time");
		column.setHeader("Total Time");
		column.setWidth(150);
		column.setRenderer(time);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		column = new ColumnConfig();
		column.setId("today");
		column.setHeader("Today's Points");
		column.setWidth(200);
		column.setRenderer(today);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		column = new ColumnConfig();
		column.setId("level");
		column.setHeader("Level");
		column.setWidth(150);
		column.setRenderer(level);
		column.setAlignment(Style.HorizontalAlignment.CENTER);
		configs.add(column);
		
		ColumnModel cm = new ColumnModel(configs);
		
		ListStore<Child> store = new ListStore<Child>();
		store.add(TestData.getChildren());
		
		ContentPanel cp = new ContentPanel();
		cp.setBodyBorder(false);
		cp.setHeading("Leader Board");
		cp.setButtonAlign(HorizontalAlignment.CENTER);
		cp.setLayout(new FitLayout());
		cp.setWidth(1000);
		cp.setAutoHeight(true);
		
		Grid<Child> grid = new Grid<Child>(store, cm);
		grid.setStyleAttribute("bordertop", "none");
		grid.setAutoExpandColumn("name");
		grid.setBorders(true);
		grid.setStripeRows(true);
		grid.setHeight(300);
		grid.getSelectionModel().select(2, true);
		
		cp.add(grid);
		
		Header encouragement = new Header();
		encouragement.setBorders(false);
		encouragement.setText("<br /><br />\"Good JOB Adrian!<br />Keep up the hardwork!\"");
		encouragement.setStyleAttribute("text-align", "right");
		encouragement.setStyleAttribute("font-size", "x-large");
		
		final Image coach = new Image();
		coach.setUrl("coach.jpg");
		coach.setStylePrimaryName("padding: 100px");
		coach.setWidth("170");
		
		LayoutContainer bottomContainer = new LayoutContainer();
		bottomContainer.setLayout(new ColumnLayout());
		bottomContainer.add(encouragement, new ColumnData(.5));
		bottomContainer.add(coach, new ColumnData(170));
		bottomContainer.setAutoHeight(true);
		bottomContainer.setStyleAttribute("background-color", "#ffcc66");
		
		cp.add(bottomContainer);
		
		final Image image = new Image();
		image.setUrl("http://www.ltscotland.org.uk/Images/games10_tcm4-480860.jpg");
		image.setStylePrimaryName("text-align: center;");
		
		Header top = new Header();
		top.setBorders(false);
		top.setText("Today: <span style='color: blue;'>" + 110 + 
				"</span><br />Total: <span style='color: red;'>" + 15000 + "</span>");
		top.setStyleAttribute("text-align", "center");
		top.setStyleAttribute("font-size", "xx-large");
		
		LabelField bottom = new LabelField();
		bottom.setBorders(false);
		bottom.setText("<span style='font-size: x-large; font-weight: bold; color: green;'>" +
				"Welcome to KidFit Adrian!</span>");
		bottom.setStyleAttribute("text-align", "center");
		
		LabelField info = new LabelField();
		info.setBorders(false);
		info.setText("<span style='color: #2F4F4F;'>Level:</span> Athlete" +
				"<br /><span style='color: #2F4F4F;'>Rank:</span> 3" +
				"<br /><br /><span style='color: #2F4F4F;'><span style='font-style: italic;'>Points</span>" +
				"<br/>This Month:</span> 350" +
				"<br /><span style='color: #2F4F4F'>Total</span> 15000");
		info.setStyleAttribute("font-size", "large");
		
		VerticalPanel vPanel = new VerticalPanel();
		vPanel.add(top);
		vPanel.add(image);
		vPanel.setTableWidth("230");
		vPanel.add(bottom);
		vPanel.add(info);
		vPanel.setStyleAttribute("background-color", "white");
		vPanel.setStyleAttribute("padding", "5px");
		vPanel.setBorders(true);
		
		columnOne.add(vPanel);
		columnTwo.add(cp);
		
		final LayoutContainer pageTwo = new LayoutContainer();
		pageTwo.setStyleAttribute("padding", "10ox");
		pageTwo.setLayout(new ColumnLayout());
		pageTwo.setVisible(false);
		
		main.add(pageTwo);
		
		ContentPanel view = new ContentPanel();
		view.setBodyBorder(false);
		view.setHeaderVisible(false);
		view.setButtonAlign(HorizontalAlignment.CENTER);
		view.setLayout(new FitLayout());
		view.setWidth(1000);
		view.setAutoHeight(true);
		
		TabPanel folder = new TabPanel();
		folder.setWidth(900);
		folder.setAutoHeight(true);
		
		TabItem todayPts = new TabItem("Today");
		TabItem bmi = new TabItem("Class BMI");
		TabItem hr = new TabItem("Class Heart Rate");
		TabItem overall = new TabItem("Class Analysis");
		TabItem past = new TabItem("History");
		TabItem ref = new TabItem("References");
		folder.add(todayPts);
		folder.add(bmi);
		folder.add(hr);
		folder.add(overall);
		folder.add(past);
		folder.add(ref);
		
		final Chart c = new Chart("resources/chart/open-flash-chart.swf");
		c.setBorders(true);
		c.setChartModel(MyBarChart.getChart());
		
		ContentPanel chartPanel = new ContentPanel();  
		chartPanel.setHeaderVisible(false);
		chartPanel.setFrame(true);  
		chartPanel.setSize(900, 500);  
		chartPanel.setLayout(new FitLayout()); 
		chartPanel.add(c);
		chartPanel.setStyleAttribute("padding", "50px");
		chartPanel.setStyleAttribute("margin", "10px");
		
		todayPts.add(chartPanel);
		
		Header header = new Header();
		header.setText("<span style='border-bottom: black 2px solid;'>Class Statistics</span><br /><br />" +
				"<span style='color: #2F4F4F;'>Average Points: 16126.6</span><br /><br />" +
				"<span style='color: #2F4F4F;'>Average BMI: 26</span><br /><br />" +
				"<span style='color: #2F4F4F;'>Average Heart Rate: 121</span>");
		header.setBorders(false);
		header.setStyleAttribute("text-align", "center");
		header.setStyleAttribute("font-size", "xx-large");
		
		VerticalPanel classPanel = new VerticalPanel();
		classPanel.setWidth(230);
		classPanel.setAutoHeight(true);
		classPanel.setBorders(true);
		classPanel.add(header);
		classPanel.setStyleAttribute("background-color", "#ffffff");
		classPanel.setStyleAttribute("padding", "5px");
		classPanel.setStyleAttribute("margin", "10px");
		
		pageTwo.add(classPanel);
		pageTwo.add(folder);
		
		Button changeView = new Button("Switch View");
		main.add(changeView);
		changeView.addSelectionListener(new SelectionListener<ButtonEvent> () {
			@Override
			public void componentSelected(ButtonEvent ce) {
				if(pageOne.isVisible()) {
					pageOne.setVisible(false);
					pageTwo.setVisible(true);
				} else {
					pageOne.setVisible(true);
					pageTwo.setVisible(false);
				}
			}
		});
	}
}

class MyBarChart{
	public static ChartModel getChart() {
		ChartModel chart = new ChartModel("Today's Workout", "font-size: 25px; font-weight: bold; font-family: Verdana; color:#008800;");
		chart.setBackgroundColour("#fffff5");
		chart.setDecimalSeparatorComma(false);
		XAxis xa = new XAxis();
		xa.setLabels(TestData.getLabels());
		xa.getLabels().setColour("#008800");
		xa.setGridColour("#008800");
		xa.setColour("#008800");
		chart.setXAxis(xa);
		YAxis ya = new YAxis();
		ya.setRange(0, 200);
		ya.setSteps(10);
		ya.setGridColour("#008800");
		ya.setColour("#008800");
		chart.setYAxisLabelStyle(10, "#008800");
		chart.setYAxis(ya);
		FilledBarChart bchart = new FilledBarChart("#6666ff", "#000066");
		bchart.setTooltip("#val# pts");
		bchart.addValues(TestData.getToday());
		chart.addChartConfig(bchart);
		
		return chart;
	}
	
}
